<template>
  <div>
    <h1>App</h1>
    <p>count:{{ count }}</p>
    <button @click="addCount">addCount</button>
  </div>
</template>

<script lang="ts">
 import { defineComponent } from "vue"
  export default  defineComponent({
    name:'App',
    });
</script>

<script setup lang="ts">
import { ref } from "vue";
/* 
  使用ref方法来创建响应式数据:
    - 接受一个内部值，返回一个响应式的、可更改的 ref 对象
    - 此对象只有一个指向其内部值的属性 .value
    - 它也是响应式的，即所有对 .value 的操作都将被追踪
*/
const count = ref(1);

console.log(count);

const addCount = () => {
  count.value++
};

</script>

<style lang="less" scoped>
  
</style>
